<div class="tab-con tab-con-3">
    <#if isUnlocked = true>
		<div class="data-wrap">
			<div class="first-row">
				<div class="chart-item">
					<div class="title">Most Used Hashtags</div>
					<div class="chart-wrap">
						<div class="chart-con" style="height:297px" id="hashtagsChart"></div>
					</div>
				</div>
				<div class="chart-item">
					<div class="title">Posting Activity (Days)</div>
					<div class="chart-wrap">
						<div class="chart-con" style="height:297px" id="daysPostChart"></div>
					</div>
				</div>
			</div>
			<div class="chart-item">
				<div class="title">
					Posting Activity (Hours)
				</div>
				<div class="chart-wrap">
					<div class="chart-con" style="height: 257px;width: 1102px" id="hoursPostChart"></div>
				</div>
			</div>
			<div class="chart-item">
				<div class="title">
					Most Used Sounds
				</div>
				<div class="table-wrap">
					<table id="postSound">
						<thead>
						<tr>
							<th width="45%">Sounds Info</th>
							<th width="10%">Usage Count</th>
							<th width="15%">
								<div class="tx-popover">
									Sound Avg View
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Average view count on the videos with the sound for the TikToker.
										</div>
									</i>
								</div>
							</th>
							<th width="15%">
								<div class="tx-popover">
									Sound Avg ER
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Average engagement rate on the videos with the sound for the TikToker.
										</div>
									</i>
								</div>
							</th>
							<th width="15%">
								<div class="tx-popover">
									Performance
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Comprehensive performance of this music compared with other recent posted
											videos from the TikToker.
										</div>
									</i>
								</div>
							</th>
						</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
			<div class="chart-item">
				<div class="title">
					Commercial Challenges
				</div>
				<div class="table-wrap" id="postCommercial">
					<table>
						<thead>
						<tr>
							<th width="45%">Challenge Info</th>
							<th width="10%">Usage Count</th>
							<th width="15%">
								<div class="tx-popover">
									Challenge Avg View
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Average view count on the videos with the challenge for the TikToker.
										</div>
									</i>
								</div>
							</th>
							<th width="15%">
								<div class="tx-popover">
									Challenge Avg ER
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Average engagement rate on the videos with the challenge for the TikToker.
										</div>
									</i>
								</div>
							</th>
							<th width="15%">
								<div class="tx-popover">
									Performance
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Comprehensive performance of this challenge compared with other recent
											posted videos from the TikToker.
										</div>
									</i>
								</div>
							</th>
						</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
			<div class="chart-item">
				<div class="title">
					Mentioned
					<div class="sub-title">
						<ul>
							<li class="is-active" onclick="changeMentionTab(this, 1)">All</li>
							<li> |</li>
							<li onclick="changeMentionTab(this, 2)">Brands</li>
						</ul>
					</div>
				</div>
				<div class="table-wrap" id="postMentioned">
					<table>
						<thead>
						<tr>
							<th width="45%">Mentioned Accounts</th>
							<th width="10%">Mentions</th>
							<th width="15%">
								<div class="tx-popover">
									Mention Avg View
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Average view count on the videos with the mention for the TikToker.
										</div>
									</i>
								</div>
							</th>
							<th width="15%">
								<div class="tx-popover">
									Mention Avg ER
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Average engagement rate on the videos with the mention for the TikToker.
										</div>
									</i>
								</div>
							</th>
							<th width="15%">
								<div class="tx-popover">
									Performance
									<i onmouseover="showTips(this)" onmouseout="hideTips(this)"
									   class="iconfont iconbangzhu">
										<div>
											Comprehensive performance of this mention compared with other recent posted
											videos from the TikToker.
										</div>
									</i>
								</div>
							</th>
						</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
    <#else>
		<div class="demo">
			<div class="tips" style="display: none;">
				<div class="title">
					Below is a sample report. Please unlock the report for more details.
				</div>
				<div>
                    <#if login == false>
						<a href="javascript:;" onclick="toLogin()">
							<button class="btn-info">Unlock Report</button>
						</a>
                    <#else>
						<button class="btn-info" onclick="checkUnlockPermission(3)">Unlock Report</button>
                    </#if>
				</div>
				`
			</div>
			<img id="demoGraphicImg" src="${contextPath}/static/img/demo_post.png">
			<div class="overflow">
				<div class="overflow-title">Unlock to view more details.</div>
				<div class="btn-row">
					<button class="btn btn-default" onclick="showDemoImg(this)">Show Example</button>
                    <#if login == false>
						<a href="javascript:;" onclick="toLogin()">
							<button class="btn-info">Unlock Report</button>
						</a>
                    <#else>
						<button class="btn-info" onclick="checkUnlockPermission(3)">Unlock Report</button>
                    </#if>
				</div>
			</div>
		</div>
    </#if>
</div>
<script>
    let currMentionTab = 1

    function changeMentionTab(e, index) {
        if (currMentionTab === index) {
            return false
        }
        e.classList.add('is-active')
        if (index === 1) {
            e.nextElementSibling.nextElementSibling.classList.remove('is-active')
        } else {
            e.previousElementSibling.previousElementSibling.classList.remove('is-active')
        }
        currMentionTab = index
        document.getElementById('postMentioned').showLoading()
        getMentioned(index, true)
    }
</script>